<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getPlatformResponseRule, getPlatformActiveRule } from "@/api/base";

interface RuleData {
  id: number;
  title: string;
  content: string;
  status: number;
  operUserId: number;
  createTime: string;
  updateTime: string;
}

const tabActive = ref(1);
const content = ref("");
const isLoading = ref(false);

const changeTab = async (tab: number) => {
  tabActive.value = tab;
  await fetchRuleContent();
};

const fetchRuleContent = async () => {
  isLoading.value = true;
  try {
    const api =
      tabActive.value === 1 ? getPlatformResponseRule : getPlatformActiveRule;
    const response = await api();
    if (response.code === 200 && response.data) {
      content.value = response.data.content.replace(/\n/g, "<br/>");
    } else {
      throw new Error("获取规则内容失败");
    }
  } catch (error) {
    console.error("获取规则内容出错:", error);
    content.value = "加载规则内容时出错，请稍后重试。";
  } finally {
    isLoading.value = false;
  }
};

onMounted(fetchRuleContent);
</script>

<template>
  <h3>平台规则</h3>
  <div class="tab-box" v-loading="isLoading">
    <p class="tabs">
      <span :class="{ active: tabActive === 1 }" @click="changeTab(1)"
        >响应规则</span
      >
      <span :class="{ active: tabActive === 2 }" @click="changeTab(2)"
        >活跃规则</span
      >
    </p>
    <div class="html-content" v-html="content"></div>
  </div>
</template>

<style scoped lang="scss">
.tab-box {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-top: 16px;
  padding: 16px;
  min-height: 200px; // 为了让 loading 效果更明显

  .tabs {
    display: flex;
    align-items: center;
    height: 40px;

    span {
      margin-right: 40px;
      cursor: pointer;

      &.active {
        color: #1dbf73;
        font-weight: bold;
        position: relative;

        &:after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: #1dbf73;
          position: absolute;
          bottom: -12px;
          left: 0;
        }
      }
    }
  }

  .html-content {
    margin-top: 20px;
  }
}
</style>
